<template lang="pug">
div
  Breadcrumb
    BreadcrumbItem 问题模块
    BreadcrumbItem 问题列表
  Table(:row-class-name='rowClassName', :columns='cols', :data='questions', :loading='fetching')

  div.text-center(style='margin-top: 16px')
    Page(:current='page + 1', :total='total', :page-size='pageSize', size='small', show-total, @on-change='viewPage')

</template>

<script>
import questionApi from '@/apis/question'
import store from '@/store'

const pageSize = 10

export default {
  beforeRouteEnter (to, from, next) {
    let page = to.query.page || 0
    page = Math.max(page - 1, 0)

    questionApi.getQuestions({
      gid: store.state.app.id,
      page,
      limit: pageSize
    }).then(data => {
      console.log(data)
      next(vm => {
        vm.page = page
        vm.total = data.data.total
        vm.questions = data.data.list
        vm.processing = data.data.list.map(item => false)
      })
    })
  },
  beforeRouteUpdate (to, from, next) {
    let page = to.query.page || 0
    page = Math.max(page - 1, 0)

    this.fetching = true
    questionApi.getQuestions({
      gid: store.state.app.id,
      page,
      limit: pageSize
    }).then(data => {
      this.page = page
      this.total = data.data.total
      this.questions = data.data.list
      this.fetching = false
      next()
    })
  },
  data () {
    return {
      fetching: false,
      processing: {},
      questions: [],
      page: Math.max(this.$route.query.page - 1) || 0,
      total: 0,
      pageSize,
      cols: [
        { title: '标题', key: 'title' },
        { title: '提问时间', width: 150, key: 'timeFormatted' },
        {
          title: '状态',
          width: 120,
          align: 'center',
          className: 'answerCount',
          render: (h, params) => {
            let text = params.row.answerCount ? '已回答' : '待回答'
            return h('span', text)
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$router.push(`/questions/${params.row.id}`)
                  }
                }
              }, '编辑'),
              // h('Button', {
              //   props: {
              //     type: 'error',
              //     size: 'small'
              //   },
              //   on: {
              //     click: () => {
              //       this.remove(params.index)
              //     }
              //   }
              // }, '删除')
              h('Button', {
                props: {
                  type: params.row.published ? 'ghost' : 'warning',
                  size: 'small',
                  loading: this.processing[params.index]
                },
                on: {
                  click: () => {
                    params.row.published ? this.unpublish(params.index) : this.publish(params.index)
                  }
                }
              }, params.row.published ? '设为隐藏' : '设为公开')
            ])
          }
        }
      ]
    }
  },
  methods: {
    rowClassName (row, index) {
      if (row.answerCount === 0) {
        return 'row-not-answered'
      }
    },
    viewPage (page) {
      this.$router.push({
        path: '',
        query: { page }
      })
    },
    remove (idx) {
      console.log(this.questions[idx])
      this.$Modal.confirm({
        title: '删除此问题？',
        content: this.questions[idx].title,
        loading: true,
        onOk: () => {
          questionApi.deleteQuestion(this.questions[idx].id)
            .then(() => {
              this.$Modal.remove()
              this.questions.splice(idx, 1)
            })
        }
      })
    },
    updatePublishStatus (idx, status) {
      // this.processing[idx] = true
      this.processing.splice(idx, 1, true)
      let pack = {
        id: this.questions[idx].id,
        published: status
      }
      questionApi.updateQuestion(pack).then(data => {
        // this.questions[idx] = data
        this.questions.splice(idx, 1, data)
        // this.processing[idx] = false
        this.processing.splice(idx, 1, false)
        console.log(this.$forceUpdate)
        this.$forceUpdate()
      })
    },
    publish (idx) {
      this.updatePublishStatus(idx, true)
    },
    unpublish (idx) {
      this.updatePublishStatus(idx, false)
    }
  }
}
</script>

<style>
.row-not-answered .answerCount {
  /* background-color: #e4f1f3; */
  font-weight: bold;
  color: #f40;
}
</style>
